import React, { useEffect, useState } from 'react';
import { useHistory } from 'dva';
import { useCountDown } from 'ahooks';

import './modal.less';

const Modal = (props) => {
  const history = useHistory();
  const [disabled, setDisabled] = useState(true);

  const [countdown] = useCountDown({
    targetDate: Date.now() + 10000,
    onEnd: () => {
      setDisabled(false);
    },
  });

  const handleClose = () => {
    !disabled && history.replace('/business-match');
  };

  return (
    <div className="modal-box">
      <div className="modal-mask"></div>
      <div className="modal-content-box">
        <div className="label">{props.children}</div>
        <div className={`btn ${disabled && 'disabled'}`} onClick={handleClose}>
          确定{countdown > 0 && <>（{Math.round(countdown / 1000)}s）</>}
        </div>
      </div>
    </div>
  );
};

export default Modal;
